<template>
    <div class="authority">
        <div class="gva-search-box">
            <el-form ref="searchForm" label-width="150" :inline="true"
                style="display: flex;flex-direction: column;align-items: center;">
                <div>
                    <el-form-item label="年份">
                        <el-date-picker format="YYYY" value-format="YYYY" v-model.number="searchInfo.year"
                            style="width: 200px;" type="year" placeholder="请选择" />
                    </el-form-item>
                    <el-form-item label="维修类型">
                        <el-select v-model.number="searchInfo.type" placeholder="请选择" style="width: 200px;">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="办公楼名称">
                        <el-input v-model="searchInfo.buildingName" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="项目名称">
                        <el-input v-model="searchInfo.name" style="width: 200px;"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="审核结果">
                        <el-checkbox-group v-model="searchInfo.examineResults">
                            <el-checkbox v-for="item in adoptList.slice(1)" :value="item.id"
                                :label="item.name"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="onSubmit">
                        查询
                    </el-button>
                    <el-button icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box unit">
            <div class="ant-alert-info">
                <el-popover placement="left-start" :width="350" trigger="click" transition='el-zoom-in-left'>
                    <div class="pop-content">
                        <div class="pop-title">自定义列</div>
                        <div class="check-list">
                            <el-checkbox-group v-model="checkedColumns" @change="handleColumnsChange">
                                <el-checkbox v-for="column in columns" :value="column" :label="column"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <template #reference>
                        <div class="anticon">
                            <el-icon size="16" color="#1890ff">
                                <Setting />
                            </el-icon>
                            <div style="margin-left: 2px;">自定义列</div>
                        </div>
                    </template>
                </el-popover>
            </div>
            <el-table :data="tableData" row-key="id">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column align="left" label="年份" prop="year"
                    v-if="checkedColumns.includes('年份')"></el-table-column>
                <el-table-column align="left" label="申请单位" prop="unitName" show-overflow-tooltip
                    v-if="checkedColumns.includes('申请单位')"></el-table-column>
                <el-table-column align="left" label="办公楼名称" prop="buildingName" show-overflow-tooltip
                    v-if="checkedColumns.includes('办公楼名称')"></el-table-column>
                <el-table-column align="left" label="项目名称" prop="name"
                    v-if="checkedColumns.includes('项目名称')"></el-table-column>
                <el-table-column align="left" label="申请时间" v-if="checkedColumns.includes('申请时间')">
                    <template #default="scope">
                        {{ formatTimestamps(scope.row.applyAt) }}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="维修类型" v-if="checkedColumns.includes('维修类型')" show-overflow-tooltip>
                    <template #default="scope">
                        {{ typeList[scope.row.type - 1]?.name }}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="审核结果" v-if="checkedColumns.includes('审核结果')" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ getResult(scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="批复金额" show-overflow-tooltip v-if="checkedColumns.includes('批复金额')">
                    <template #default="scope">
                        <span v-if="scope.row.totalFunding">{{ scope.row.totalFunding }}万元</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="联系人" prop="contacts"
                    v-if="checkedColumns.includes('联系人')"></el-table-column>
                <el-table-column align="left" label="联系电话" prop="contactUs"
                    v-if="checkedColumns.includes('联系电话')"></el-table-column>
                <el-table-column align="left" label="附件" v-if="checkedColumns.includes('附件')">
                    <template #default="scope">
                        <span style="color: #3b82f6;cursor: pointer;" @click="seeFile(scope.row.id)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" v-if="checkedColumns.includes('操作')">
                    <template #default="scope">
                        <span style="color: #3b82f6;cursor: pointer;" @click="seeDetail(scope.row)">详情</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="gva-pagination">
                <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total"
                    layout="prev, pager, next" @current-change="handleCurrentChange" />
            </div>
        </div>

        <el-drawer v-model="dialogFormVisible" :size="1000" :before-close="handleClose" :show-close="false">
            <template #header>
                <div class="flex justify-between items-center">
                    <span class="text-lg">维修详情</span>
                    <div>
                        <el-button @click="closeDialog">取消</el-button>
                    </div>
                </div>
            </template>
            <el-form v-if="dialogFormVisible" ref="yyglForm" label-width="150" :model="form" :rules="rules">
                <div class="section-title">基本信息</div>
                <el-form-item label="维修项目名称">
                    <el-input v-model="form.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="办公楼名称">
                    <el-input v-model="form.buildingName" disabled></el-input>
                </el-form-item>
                <el-form-item label="维修类型" v-if="typeList[form.type]?.name">
                    <el-input v-model="typeList[form.type].name" disabled></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="form.contacts" disabled></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="form.contactUs" disabled></el-input>
                </el-form-item>
                <div class="section-title">维修预算安排情况</div>
                <el-form-item label="资金来源" prop="fundsSource">
                    <el-input v-model="form2.fundsSource" disabled></el-input>
                </el-form-item>
                <el-form-item label="安排预算金额" prop="budget">
                    <el-input v-model="form2.budget" disabled placeholder="请输入" style="width: 350px;" />
                    <span style="margin-left: 4px;">万元</span>
                </el-form-item>
                <el-form-item label="备注" prop="budgetNotes">
                    <el-input v-model="form2.budgetNotes" disabled type="textarea" :rows="3" placeholder="请输入"
                        style="width: 350px;" />
                </el-form-item>
                <div class="section-title">项目实施进度情况</div>
                <el-steps :space="300" :active="form2.progress" finish-status="success" align-center
                    style="margin: 30px 0;">
                    <el-step @click.native="form2.progress = 0">
                        <template #title>
                            <span style="cursor: pointer;">未开工</span>
                        </template>
                    </el-step>
                    <el-step @click.native="form2.progress = 1">
                        <template #title>
                            <span style="cursor: pointer;">已开工实施中</span>
                        </template>
                    </el-step>
                    <el-step @click.native="form2.progress = 2">
                        <template #title>
                            <span style="cursor: pointer;">已竣工</span>
                        </template>
                    </el-step>
                    <el-step @click.native="form2.progress = 3">
                        <template #title>
                            <span style="cursor: pointer;">已决算转固</span>
                        </template>
                    </el-step>
                </el-steps>
                <el-form-item label="开工时间" prop="startTime" v-if="form2.progress == 1">
                    <el-date-picker format="YYYY-MM-DD" disabled value-format="YYYY-MM-DD" v-model="form2.startTime"
                        type="date" placeholder="请选择" />
                </el-form-item>
                <!-- <el-form-item label="施工照片" prop="picture" v-if="form2.progress == 1">
                    <el-upload v-model:file-list="fileList1" multiple :action="adminUrl" :on-success="uploadSuccess1"
                        :headers="headerOdj" list-type="picture-card" :on-preview="handlePicturePreview">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </el-form-item> -->

                <el-form-item label="竣工时间" prop="completionTime" v-if="form2.progress == 2">
                    <el-date-picker disabled format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        v-model="form2.completionTime" type="date" placeholder="请选择" />
                </el-form-item>
                <el-form-item label="是否通过验收" prop="checkAccept" v-if="form2.progress == 2">
                    <el-radio-group v-model="form2.checkAccept" class="ml-4" disabled>
                        <el-radio :value="1" size="large">是</el-radio>
                        <el-radio :value="2" size="large">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="项目结算情况" prop="settlement" v-if="form2.progress == 2">
                    <el-radio-group v-model="form2.settlement" class="ml-4" disabled>
                        <el-radio :value="1" size="large">已结算</el-radio>
                        <el-radio :value="2" size="large">未结算</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="项目结算金额" prop="settlementFunds" v-if="form2.progress == 2">
                    <el-input v-model="form2.settlementFunds" placeholder="请输入" style="width: 350px;" disabled />
                    <span style="margin-left: 4px;">万元</span>
                    <span style="margin-left: 4px;color: #FF473E;">注：保留两位小数</span>
                </el-form-item>
                <!-- <el-form-item label="上传竣工报告" prop="jgbg" style="align-items: normal;" v-if="form2.progress == 2">
                    <el-upload ref="uploadRef" v-model:file-list="fileList2" :action="adminUrl"
                        :on-success="uploadSuccess2" :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="上传决算报告" prop="jsbg" style="align-items: normal;" v-if="form2.progress == 3||form.progress == 4">
                    <el-upload ref="uploadRef" v-model:file-list="fileList3" :action="adminUrl"
                        :on-success="uploadSuccess3" :headers="headerOdj">
                        <el-button type="primary">选择文件</el-button>
                    </el-upload>
                </el-form-item> -->
                <div class="section-title">附件</div>
                <el-table :data="fjList" row-key="id">
                    <el-table-column type="index" label="序号" width="100" />
                    <el-table-column align="left" label="文件名" prop="fileName">
                    </el-table-column>
                    <el-table-column align="left" label="文件类型">
                        <template #default="scope">
                            {{ fileTypes[scope.row.fileType] }}
                        </template>
                    </el-table-column>
                    <el-table-column align="left" label="上传时间">
                        <template #default="scope">
                            {{ formatTimestamps(scope.row.createdAt) }}
                        </template>
                    </el-table-column>
                    <el-table-column align="left" fixed="right" label="操作">
                        <template #default="scope">
                            <el-button type="primary" link icon="download" @click="download(scope.row)">
                                下载
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </el-drawer>
    </div>
</template>
<script setup>
import {
    unitLists
} from '@/api/unit'
import {
    declareMedium,
    declareMediumConstruction,
    declareMediumFile
} from '@/api/yewuguanli'

import { reactive, ref, onMounted, computed } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { buildTimeList, countdownEmits, ElMessage, ElMessageBox, useFormItem } from 'element-plus'
import { formatTimestamps } from '@/utils/format'
import { fileTypes, adoptList } from '@/utils/constant';
defineOptions({
    name: 'Yygl'
})
const appStore = useAppStore()

const searchInfo = ref({
    name: '',
    buildingName: '',
    year: '',
    type: '',
    examineResults: [],
    examineRes: '',
    progress:3
})

const userStore = useUserStore()
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

const active = ref(1)
const form = ref({
    name: ''
})

const initForm = () => {
    form.value = {

    }
}

const checkedColumns = ref(['序号', '年份', '申请单位', '办公楼名称', '项目名称', '申请时间', '维修类型', '审核结果', '批复金额', '操作'])

if (localStorage.getItem('columnData') && JSON.parse(localStorage.getItem('columnData')).wxcx) {
    checkedColumns.value = JSON.parse(localStorage.getItem('columnData')).wxcx
}
const columns = ref(['序号', '年份', '申请单位', '办公楼名称', '项目名称', '申请时间', '维修类型', '审核结果', '批复金额', '操作'])
const handleColumnsChange = (val) => {
    let obj = {

    }
    if (localStorage.getItem('columnData')) {
        obj = JSON.parse(localStorage.getItem('columnData'))
    }
    obj.wxcx = val
    localStorage.setItem('columnData', JSON.stringify(obj))
}

const addUnit = () => {
    dialogFormVisible.value = true
}

const closeDialog = () => {
    initForm()
    dialogFormVisible.value = false
}

const handleClose = (done) => {
    initForm()
    done()
}
const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}
const tableData = ref([])
// 查询
const getTableData = async () => {
    if (searchInfo.value.examineResults.length > 0) {
        searchInfo.value.examineRes = searchInfo.value.examineResults.join(',')
    }
    const res = await declareMedium({
        pageNumber: page.value,
        pageSize: pageSize.value,
        ...searchInfo.value
    })
    if (res.code == 200) {
        tableData.value = res.result.data
        total.value = res.result.total
    }
}
getTableData()

const unitData = ref([])
onMounted(() => {
    unitLists().then(res => {
        unitData.value = res.result.data
    })
})

const onSubmit = () => {
    page.value = 1
    getTableData()
}
const onReset = () => {
    page.value=1
    searchInfo.value = {
        name: '',
        buildingName: '',
        year: '',
        type: '',
        examineResults: [],
        examineRes: '',
        progress:3
    }
    getTableData()
}

const download = (row) => {
    window.open(row.fileUrl)
}
const typeList = ref([
    {
        name: '大中修',
        id: 1
    },
    {
        name: '配置后维修',
        id: 2
    },
    {
        name: '改变房屋布局用途维修',
        id: 3
    }
])
//审核结果
function getResult(row){
    let text = ''
    if(row.type==3){
        text = row.examineResult==1?'通过':'未通过'
    }else{
       text= adoptList[row.adopt].name
    }
    return text
}
const form2 = ref({})
const fileList1 = ref([])
const fileList2 = ref([])
const fileList3 = ref([])
let dialogImageUrl = ref()
const dialogVisible = ref(false)
//图片预览
const handlePicturePreview = (file, files) => {
    dialogImageUrl.value = file.url;
    dialogVisible.value = true
}
const fjList = ref([])

function seeDetail(row) {
    form.value = row
    declareMediumFile(row.id).then(res => {
        fjList.value = res.result
        dialogFormVisible.value = true
    })
    declareMediumConstruction(row.id).then(res => {
        form2.value = res.result
        if (form2.value.progress < 4) {
            form2.value.progress = form2.value.progress + 1
        }
        form2.value.fundsSource = form.value.fundsSource == 0 ? 1 : form.value.fundsSource
        if (form2.value.constructionPic) {
            fileList1.value = form2.value.constructionPic.split(',').map((item, index) => {
                return {
                    name: index,
                    url: item
                }
            })
        }
        if (form2.value.completionReport) {
            fileList2.value = form2.value.completionReport.split(',').map((item, index) => {
                return {
                    name: item,
                    url: item
                }
            })
        }
        if (form2.value.finalAccountsReport) {
            fileList3.value = form2.value.finalAccountsReport.split(',').map((item, index) => {
                return {
                    name: item,
                    url: item
                }
            })
        }
    })
}

</script>

<style lang="scss">
.ant-alert-info {
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    color: #1890ff;
    padding: 5px;

    .anticon {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}

.section-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 33px;
    padding: 8px 0 4px 14px;
    color: #4E7DFD;
    position: relative;
}

.section-title:before {
    content: '';
    position: absolute;
    top: 17px;
    left: 0;
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #4E7DFD;
}

.sb-draw {
    .title {
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #e4e7ed;
    }
}
</style>